﻿<!DOCTYPE html>
<html ng-app="classModule">
<head>
    <meta charset="UTF-8">
    <title>基本构造</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

    <script src="JS/angular.min.js"></script>
    <script type="text/javascript">
        var classModule = angular.module("classModule", []); // 第一个是参数的名称 第二个表示这个Module依赖那些module 字符串数组
        // 创建controller
        classModule.controller('ClassController', ['$scope', function ($scope) {
            // 初始化数据

            var class1 = {
                CNo: "1000",
                CName: "软件1011",
                CType: 1,
                StudentList: [{
                    ID:1,
                    SName: "test1",
                    Age:18,
                    Sex: 1,
                    IsEdit:false
                },
                {
                    SName: 2,
                    Age: 20,
                    Sex: 0,
                    IsEdit: false
                }]
            }
            var class2 = {
                CNo: "1001",
                CName: "英语1012",
                CType: 2,
                StudentList: [{
                    ID: 3,
                    SName: "test11",
                    Age:10,
                    Sex: 1,
                    IsEdit: false
                },
                {
                    ID: 4,
                    SName: "test12",
                    Age:11,
                    Sex: 0,
                    IsEdit: false
                }]
            }
            $scope.cTypes = [{
                id: 1,
                Name: "软件"
            }, {
                id: 2,
                Name: "英语"
            }];
            // 班级的集合
            $scope.classes = [class1, class2];
            // 设置当前编辑的班级 默认是第一个
            $scope.currentItem = angular.copy($scope.classes[0]);
            $scope.setCurrentItem = function (classItem) {
                $scope.currentItem = angular.copy(classItem);
            }
            $scope.cancleStudent = function (studentItem,index) {
                // 如果是新增的取消就直接删除

            }
        }]);


    </script>
</head>
<body ng-controller="ClassController">
    <nav style="width: 10%; height: 600px; border: 1px solid #428bca; float: left;">
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>班级名称</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="classItem in classes" style="cursor: pointer" ng-click="setCurrentItem(classItem)">
                    <td>{{classItem.CName}}</td>
                </tr>
            </tbody>
        </table>
    </nav>

    <section style="float: left; width: 87%; margin-left: 2%">

        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">班级信息
                </h3>
            </div>
            <div class="panel-body">
                <form class="form-horizontal" role="form" name="ClassForm" novalidate>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-1 control-label">班级编号</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" name="CNo" ng-model="currentItem.CNo" maxlength="8"  placeholder="请输入班级编号" required>
                            <span ng-show="ClassForm.CNo.$dirty && ClassForm.CNo.$invalid">
                                <span ng-show="ClassForm.CNo.$error.required" style="color: red">不能为空
                                </span>
                            </span>
                        </div>
                        <label for="firstname" class="col-sm-1 control-label">班级名字</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" Name="CName" ng-model="currentItem.CName"
                                placeholder="请输入名字" ng-pattern="/[\u4e00-\u9fa5]+/" required>
                             <span ng-show="ClassForm.CName.$dirty && ClassForm.CName.$invalid">
                                  <span ng-show="ClassForm.CName.$error.required" style="color: red">不能为空
                                </span>
                                <span ng-show="ClassForm.CName.$error.pattern" style="color: red">请输入中文
                                </span>
                            </span>
                        </div>
                        <div style="margin-top: 20px; float: left; width: 100%;">
                            <label for="firstname" class="col-sm-1 control-label">班级类别</label>
                            <div class="col-sm-11">
                                <select class="form-control" name="CType" ng-options="item.id as item.Name for item in cTypes" ng-model="currentItem.CType"></select>
                            </div>
                        </div>

                    </div>


                    <div class="panel panel-primary" style="min-height: 350px;">
                        <div class="panel-heading">
                            <h3 class="panel-title">学员列表
                            </h3>
                        </div>
                        <div class="panel-body">
                            <div style="float: right; margin-bottom: 10px">
                                <button type="button" class="btn btn-primary">添加一行</button>
                            </div>
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>名称</th>
                                        <th>年龄</th>
                                        <th>性别</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="studentItem in currentItem.StudentList">
                                        <td>
                                           <span ng-show="!studentItem.IsEdit">{{studentItem.SName}}</span>
                                            <input type="text" class="form-control" placeholder="请输入名称" ng-model="studentItem.SName" ng-show="studentItem.IsEdit"></td>
                                        <td>
                                             <span ng-show="!studentItem.IsEdit">{{studentItem.Age}}</span>
                                            <input type="number" class="form-control" ng-model="studentItem.Age" ng-show="studentItem.IsEdit"></td>
                                        <td>
                                             <span ng-show="!studentItem.IsEdit">{{studentItem.Sex?"男":"女"}}</span>
                                            <select class="form-control" ng-model="studentItem.Sex" ng-show="studentItem.IsEdit">
                                                <option value="0">女</option>
                                                <option value="1">男</option>
                                            </select></td>
                                        <td>
                                            <a href="#" ng-show="!studentItem.IsEdit" ng-click="studentItem.IsEdit=true">编辑</a>
                                            <a href="#" ng-show="!studentItem.IsEdit">删除</a>
                                            <a href="#" ng-show="studentItem.IsEdit">保存</a>
                                            <a href="#" ng-show="studentItem.IsEdit" ng-click="cancleStudent(studentItem,$index)">取消</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <footer style="width: 300px; margin: 0 auto;">
                        <button type="button" class="btn btn-primary btn-lg btn-block">保存</button>
                    </footer>
                </form>



            </div>
        </div>

    </section>
</body>
</html>
